<template>
	<view>
		<view v-if="stately == 1" class="taping"> <!-- 录音弹窗 -->
			<view class="voicelist">
				<view>
					<view v-for="i in 5" :key="i" :style="{width: `${50 - i * 5}rpx;`, animation: `dh .5s ${(5 - i)*0.4}s infinite;`}"
						>
					</view>
				</view>
			</view>
		</view>
		<view class="pinsay">
			<!-- <view v-if="recordstate == 0" @tap="changekeype()" class="keyboard"></view> -->
			<!-- <view v-else @tap="changekeype()" class="imgly"></view> -->
			<view v-if="recordstate == 0" @longpress="start()" @touchend="touchend()" class="voice">
				<text>按住 说话</text>
			</view>
			<view v-else class="inp">
				<input maxlength="20" type="text" v-model="inptext" @confirm="send()" placeholder="请输入内容" />
				<view @tap="send()">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
  export default {
    props: ['obj'],
		data() {
			return {
				recordstate: 1,
				stately: 0,
				inptext: '',
				indexs: 1
			}
		},
		onLoad() {
			document.onkeydown = (e) => {
				let _key = window.event.keyCode;
				//!this.clickState是防止用户重复点击回车
				if (_key === 13) {
					this.send();
				}
			};
		},
		methods: {
			start: function () {
				const seft = this
				// recorderManager.start({
				// 	duration: this.duration, //指定录音的时长，单位 ms
				// 	sampleRate: 16000, //采样率 
				// 	numberOfChannels: 1, //录音通道数
				// 	encodeBitRate: 96000, //编码码率
				// 	format: 'mp3', //音频格式，有效值 aac/mp3
				// 	frameSize: 10, //指定帧大小，单位 KB
				// })
				
				//  recorderManager.onStart(() => {
				seft.stately = 1
			},
			touchend: function () {
				this.stately = 0
			},
			changekeype: function () {
				this.recordstate = !this.recordstate
			},
			send: function () {
				if(this.inptext.trim().length > 0) {
					this.$emit('pushObj', this.person(this.obj.length, 1, [], this.inptext))
					this.inptext = ''
				} else {
					this.inptext = ''
				}
			},
			person: function (id, state, knowlist, text) {
				let o = new Object()
				o.id = id
				o.state = state
				o.knowlist = knowlist
				o.text = text

				return o
			}
		}
  }
</script>

<style lang="scss">
	@keyframes dh {
		0% { background-color: #f2f2f2; }
		100% { background-color: #999; }
		/* 百分比就是动画的时间划分*/
	}
	.taping { //录音弹窗
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 300rpx;
		height: 300rpx;
		border-radius: 20rpx;
		background: url('http://1.12.49.243/state/nuyin.png');
		background-color: rgba( 3, 3, 3, .3 );
		background-size: 50%;
		background-position: 30% center;
		background-repeat: no-repeat;
		.voicelist {
			position: relative;
			>view {
				position: absolute;
				right: 70rpx;
				top: 90rpx;
				view {
					height: 10rpx; 
					background-color: #f2f2f2;
					opacity: .5;
					margin-top: 15rpx;
				}
			}
		}
	}
	.pinsay { //输入组件
		$pinsayBgc: $uni-color-primary; //输入组件颜色风格
		$pinheight: 90rpx; //输入组件高度风格
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 3000;
		width: 100%;
		height: 140rpx;
		box-shadow: 0px -2rpx 5rpx #f3caca;
		background-color: #fff;
		.copy {
			position: fixed;
			z-index: 9;
			bottom: 20rpx;
			right: 30rpx;
			width: 550rpx;
			height: $pinheight;
		}
		.copy2 {
			position: fixed;
			z-index: 9;
			bottom: 20rpx;
			left: 40rpx;
			width: $pinheight;
			height: $pinheight;
			border-radius: 50%;
		}

		.keyboard {
			@extend .copy2;
			background: url('http://1.12.49.243/state/jianpan.png');
			background-color: #096dd9;
			background-size: 70%;
			background-repeat: no-repeat;
			background-position: center;
			
		}
		.imgly {
			background: url('http://1.12.49.243/state/nuyin.png');
			background-color: #096dd9;
			background-size: 70%;
			background-repeat: no-repeat;
			background-position: center;
			@extend .copy2;
		}
		.voice {
			@extend .copy;
			background-color: $pinsayBgc;
			border-radius: 30rpx;
			background-image: url('http://1.12.49.243/state/nuyin.png');
			background-size: 13%;
			background-repeat: no-repeat;
			background-position: 30% center;
			// color: var(--backgroundColor);
			
			&:before {
				position: relative;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				content: '';
				display: block;
				width: 101%;
				height: 101%;
				border: 2px solid $pinsayBgc;
				border-radius: 50%;
				z-index: -1;
				filter: blur(3px);
			}
			
			>text {
				position: relative;
				bottom: 80rpx;
				left: 230rpx;
				-webkit-text-stroke: 2rpx $pinsayBgc;
				font-weight: 700;
				width: 140rpx;
				color: #FFFFFF;
				white-space: nowrap;
			}
		}
		.inp {
			@extend .copy;
			right: 0;
			left: 0;
			padding-left: 30rpx;
			input {
				display: inline-block;
				height: 100%;
				width: 500rpx;
				border: 1px solid #f1f1f1;
				border-radius: 30rpx;
				padding-left: 30rpx;
				background-color: #F1F3FE;
				box-sizing: border-box;
			}
			>view {
				$heiv: calc(90rpx - 20rpx);
				position: absolute;
				right: -130rpx;
				top: 50%;
				transform: translateY(-50%);
				display: inline-block;
				width: 120rpx;
				height: $heiv;
				border-radius: calc((90rpx - 20rpx) / 2);
				background-color: $pinsayBgc;
				color: #fff;
				text-align: center;
				line-height: $heiv;
			}
		}
	}
</style>